<template>
  <div class="content" v-if="type == 0">
    <a-form ref="formRef" :model="formState" :rules="rules">
      <a-form-item ref="nickname" label="考生姓名" name="nickname">
        <a-input v-model:value="formState.nickname" placeholder="请输入姓名" />
      </a-form-item>

      <a-form-item label="考试时间" name="kaoshi_id">
        <a-select
          v-model:value="formState.kaoshi_id"
          placeholder="请选择考试时间"
        >
          <a-select-option
            v-for="item in kaoshiList"
            :key="item.id"
            :value="String(item.id)"
            >{{ item.name }} --- {{ item.kaoshi_date }}</a-select-option
          >
        </a-select>
      </a-form-item>

      <a-form-item ref="username" label="身份证号" name="username">
        <a-input
          v-model:value="formState.username"
          placeholder="请输入身份证号"
        />
      </a-form-item>

      <a-form-item ref="zkz_num" label="准考证号" name="zkz_num">
        <a-input
          v-model:value="formState.zkz_num"
          placeholder="请输入准考证号"
        />
      </a-form-item>

      <a-form-item>
        <a-button type="primary" @click="onSubmit" class="button"
          >查 询</a-button
        >
      </a-form-item>
    </a-form>
  </div>
  <div class="content" v-if="type == 1">
    <table width="900px" style="display: var(--tableType1)" align="center">
      <tr bgcolor="#554DE6" align="center" height="55px" class="table1">
        <th colspan="3">考试信息</th>
      </tr>
      <tr height="80px" class="table2">
        <td width="300px" style="border: 1px solid #554de6; padding-left: 20px">
          姓名：{{ info.nickname }}
        </td>
        <td width="300px" style="border: 1px solid #554de6; padding-left: 20px">
          性别：{{ info.gender == 0 ? "女" : "男" }}
        </td>
        <td width="300px" style="border: 1px solid #554de6; padding-left: 20px">
          准考证号：{{ info.zkz_num }}
        </td>
      </tr>
    </table>
    <table width="900px" style="display: var(--tableType1)" align="center">
      <tr height="80px" style="font-size: 1rem">
        <td
          width="450px"
          style="
            border: 1px solid #554de6;
            border-top: none;
            padding-left: 20px;
          "
        >
          证件号：{{ info.username }}
        </td>
        <td
          width="450px"
          style="
            border: 1px solid #554de6;
            border-top: none;
            padding-left: 20px;
          "
        >
          考试日期：{{ info.kaoshi_date }}
        </td>
      </tr>
      <tr bgcolor="#554DE6" align="center" height="55px" class="table1">
        <th>科目名称</th>
        <th>考试成绩</th>
      </tr>
      <tr align="center" height="120px" style="font-size: 1rem">
        <td style="border: 1px solid #554de6">
          {{ info.kaoshi_name }}
        </td>
        <td style="border: 1px solid #554de6">
          {{ info.score }}
        </td>
      </tr>
    </table>

    <table style="display: var(--tableType2); widht: 100vw" align="center">
      <tr bgcolor="#554DE6" align="center" height="55px" class="table1">
        <th colspan="3">考试信息</th>
      </tr>
      <tr height="80px" style="widht: 100vw" class="table2">
        <td style="border: 1px solid #554de6; padding-left: 20px; width: 100vw">
          姓名：{{ info.nickname }}
        </td>
      </tr>
      <tr height="80px" style="widht: 100vw" class="table2">
        <td style="border: 1px solid #554de6; padding-left: 20px; width: 100vw">
          性别：{{ info.gender == 0 ? "女" : "男" }}
        </td>
      </tr>
      <tr height="80px" style="widht: 100vw" class="table2">
        <td style="border: 1px solid #554de6; padding-left: 20px; width: 100vw">
          准考证号：{{ info.zkz_num }}
        </td>
      </tr>
    </table>
    <table width="100%" style="display: var(--tableType2)" align="center">
      <tr
        height="80px"
        width="100%"
        style="
          widht: 100%;
          font-size: 18px;
          border: 1px solid #554de6;
          border-top: none;
        "
      >
        <td width="100%" style="padding-left: 20px">
          证件号：{{ info.username }}
        </td>
      </tr>
      <tr
        height="80px"
        width="100%"
        style="font-size: 18px; border: 1px solid #554de6; border-top: none"
      >
        <td width="100%" style="padding-left: 20px">
          考试日期：{{ info.kaoshi_date }}
        </td>
      </tr>
      <tr bgcolor="#554DE6" align="center" height="55px" class="table1">
        <th>科目名称</th>
      </tr>
      <tr width="100%" align="center" height="80px" style="font-size: 18px">
        <td width="100%" style="border: 1px solid #554de6; width: 100vw">
          {{ info.kaoshi_name }}
        </td>
      </tr>
      <tr bgcolor="#554DE6" align="center" height="55px" class="table1">
        <th>考试成绩</th>
      </tr>
      <tr width="100%" align="center" height="80px" style="font-size: 18px">
        <td width="100%" style="border: 1px solid #554de6; width: 100vw">
          {{ info.score }}
        </td>
      </tr>
    </table>
  </div>
</template>

<script>
import {
  defineComponent,
  onMounted,
  reactive,
  ref,
  getCurrentInstance,
} from "vue";
import { message, notification } from "ant-design-vue";
import { getKaoshi, getSearchCj } from "@/api/https.js";
export default defineComponent({
  setup() {
    const { proxy } = getCurrentInstance();
    const formRef = ref();
    const formState = reactive({
      user_id: JSON.parse(localStorage.getItem("info")).id, //用户id
      nickname: "", // 考生姓名
      zkz_num: "", // 准考证号
      username: "", // 身份证号
      kaoshi_id: "", //考试时间id
    });
    // 身份证正则
    let validatePass = async (rule, value) => {
      const zz = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
      if (!zz.test(value)) {
        return Promise.reject("身份证格式填写错误");
      } else {
        return Promise.resolve();
      }
    };
    const rules = {
      nickname: [
        {
          required: true,
          message: "请输入姓名",
          trigger: "blur",
        },
      ],
      zkz_num: [
        {
          required: true,
          message: "请输入准考证号",
          trigger: "change",
        },
      ],
      username: [
        {
          required: true,
          message: "请输入身份证号",
          trigger: "blur",
        },
        {
          validator: validatePass,
          trigger: "blur",
        },
      ],
      kaoshi_id: [
        {
          required: true,
          message: "请选择报考时间",
          trigger: "change",
        },
      ],
    };

    const type = ref(0);

    const info = ref({});

    const onSubmit = async () => {
      formRef.value
        .validate()
        .then(async () => {
          message.loading({
            content: "请稍后...",
            key: "msg",
          });
          const data = await getSearchCj(formState);
          if (data.code == 1) {
            message.success({
              content: data.msg,
              key: "msg",
            });
            if (data.data) {
              type.value = 1;
            }
            data.data.kaoshi_date = proxy.$getTime(data.data.kaoshi_date);
            info.value = data.data;
          } else {
            message.error(`${data.msg}`);
          }
          console.log("准考证查询接口---", data);
        })
        .catch(() => {
          notification.error({
            message: "暂未成绩信息",
            description: `请核对您的查询信息`,
          });
        });
    };

    const kaoshiList = ref([]);

    const getInfo = async () => {
      const kaoshi = await getKaoshi();
      kaoshi.data.forEach(
        (item) => (item.kaoshi_date = proxy.$getTime(item.kaoshi_date))
      );
      kaoshiList.value = kaoshi.data;
    };

    onMounted(() => {
      getInfo();
    });

    return {
      formRef,
      other: "",
      formState,
      rules,
      onSubmit,
      kaoshiList,
      type,
      info,
    };
  },
});
</script>

<style lang="less" scoped>
.content {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  //   max-width: 500px;
  margin-top: 40px;

  .table1 {
    color: #fff;
    font-size: 22px;
    border: 1px solid #554de6;
    border-bottom: none;
  }

  .table2 {
    font-size: 18px;
    border: 1px solid #554de6;
    border-bottom: none;
  }

  .ant-form-item {
    flex-direction: var(--bannerFlex);
    justify-content: center;
  }

  .myButton {
    width: 357px;
    height: 45px;
    background: #554de6;
    border-radius: 25px;
    font-size: 20px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #ffffff;
    letter-spacing: 0.5px;
    text-align: center;
    line-height: 45px;
    margin: 100px auto 0;
  }

  .button {
    margin-top: 20px;
    width: 100%;
    height: 45px;
    background: #554de6;
    border-radius: 25px;
    font-size: var(--txtSize);
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #ffffff;
  }

  .buttons {
    text-align: center;
    font-size: var(--txtSize);
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #808080;
    cursor: pointer;
  }

  .fenge {
    width: 100%;
    border-top: 1px solid #e6e6e6;
    padding-top: 40px;
    margin-top: 100px;
    margin-bottom: 30px;
    text-align: center;
    font-size: 1.37rem;
    font-family: PingFang SC;
    font-weight: 500;
    color: #333333;
  }

  /deep/ .ant-col {
    width: 300px;
  }
  /deep/ .ant-form-item-label {
    width: 140px;
    margin-right: 20px;
  }
}
/deep/ .ant-modal-confirm-btns {
  display: none;
}
</style>
